<template>
  <div class="house-management">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/sys/ownersManagement?navIndex=3' }">数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>用户信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="el-margin-v-30 el-padding-l-25 el-padding-r-40">
      <el-row class="el-padding-20 el-white-bgcolor">
        <el-row class="my-margin-top-20" :gutter="6">
          <el-col :span="3">
            <el-input
              class="el-margin-r-10"
              placeholder="请输入昵称或姓名"
              prefix-icon="el-icon-search"
              v-model="name"
              @change="search"
              size="small"
              :clearable="true"
              @clear="cleanKey"
            ></el-input>
          </el-col>
          <el-col :span="3">
            <el-select
             clearable
              size="small"
              class="el-margin-r-10"
              v-model="userType"
              placeholder="请选择用户类型"
              @change="search"
              style="width:100%"
            >
              <el-option label="游客" :value="1"></el-option>
              <el-option label="住户" :value="2"></el-option>
              <el-option label="业主" :value="3"></el-option>
            </el-select>
          </el-col>

          <el-col :span="3">
            <el-select
             clearable
              v-model="usable"
              placeholder="请选择是否可用"
              size="small"
              @change="search"
              style="width:100%"
            >
              <el-option label="不可用" :value="0"></el-option>
              <el-option label="可用" :value="1"></el-option>
            </el-select>
          </el-col>
        </el-row>
        <!-- <el-row class="el-align-right el-font-xs">
            <el-input
              class="el-margin-r-10"
              placeholder="请输入昵称或姓名"
              prefix-icon="el-icon-search"
              v-model="name"
              style="width:130px;"
              @change="search">
            </el-input>
            <el-select class="el-margin-r-10" v-model="userType" placeholder="请选择用户类型" style="width:120px;" @change="search">
              <el-option label="游客" :value="1"></el-option>
              <el-option label="住户" :value="2"></el-option>
              <el-option label="业主" :value="3"></el-option>
            </el-select>
            <el-select v-model="usable" placeholder="请选择是否可用" style="width:120px;" @change="search">
              <el-option label="不可用" :value="0"></el-option>
              <el-option label="可用" :value="1"></el-option>
            </el-select>
        </el-row>-->
        <el-table
          class="el-margin-t-10"
          :data="table.tableData"
          border
          stripe
          style="width:100%"
          size="small"
          :highlight-current-row="true"
          ref="multipleTable"
        >
          <el-table-column label="姓名" prop="realName" width="100"></el-table-column>
          <el-table-column label="昵称">
            <template slot-scope="scope">{{scope.row.nickName}}</template>
          </el-table-column>
          <el-table-column label="性别" prop="usable" width="50">
            <template slot-scope="scope">{{scope.row.gender-1?"女":"男"}}</template>
          </el-table-column>
          <el-table-column label="身份证号码" prop="idCard" width="180"></el-table-column>
          <el-table-column label="用户类型" prop="userType" width="80">
            <template slot-scope="scope">{{userTypes[scope.row.userType-1]}}</template>
          </el-table-column>
          <el-table-column label="楼栋" prop="buildNum" width="80"></el-table-column>
          <el-table-column label="单元" prop="unitNum" width="80"></el-table-column>
          <el-table-column label="房号" prop="houseNum" width="80"></el-table-column>
          <el-table-column label="手机号" prop="phoneNum" width="120"></el-table-column>
          <el-table-column label="是否可用" prop="usable" width="80">
            <template slot-scope="scope">{{scope.row.usable?"是":"否"}}</template>
          </el-table-column>
          <el-table-column label="身份证正面" prop="idCardFront" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="showPhoto(scope.row.idCardFront)"
              >{{scope.row.idCardFront?"[身份证正面]":""}}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="身份证反面" prop="idCardBack" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="showPhoto(scope.row.idCardBack)"
              >{{scope.row.idCardBack?"[身份证反面]":""}}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="初次登录时间时间" prop="createTime">
            <template slot-scope="scope">{{scope.row.createTime}}</template>
          </el-table-column>
          <el-table-column label="上次登录时间时间" prop="loginTime">
            <template slot-scope="scope">{{scope.row.loginTime}}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="setUsable(scope.row)">{{scope.row.usable?"禁用":"启用"}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="el-margin-t-10 my-el-pagination"
          @current-change="currentChangeHandle"
          :current-page="table.currentPage"
          :page-size="table.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="table.rowCount"
        ></el-pagination>
      </el-row>
    </el-row>
  </div>
</template>
<script>
import { bus } from "../../tools/bus";
import { setItem, getItem } from "../../tools/common";
export default {
  data() {
    return {
      name: "",
      usable: null,
      userType: "",
      userTypes: ["游客", "住户", "业主"],
      table: {
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        rowCount: 3,
        queryKey: ""
      }
    };
  },
  mounted() {
    this.getMessage();
  },
  methods: {
    cleanKey(){
      this.table.currentPage = 1;
      this.name = '';
      this.getMessage();
    },
    showPhoto(_src) {
      let html = '<img src="' + _src + '" style="max-height:400px;"/>';
      this.$alert(html, {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false
      });
    },
    setUsable(rows) {
      this.$confirm(
        "确定" +
          (rows.usable ? "禁用" : "启用") +
          "用户" +
          rows.realName +
          "？",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          let url = "/user/" + (rows.usable ? "disable" : "usable");
          let p = {
            userId: rows.userId
          };
          this.$http
            .fetch(url, p)
            .then(res => {
              this.getMessage();
            })
            .catch(err => {});
        })
        .catch(() => {});
    },
    search() {
      this.table.currentPage = 1;
      this.getMessage();
    },
    getMessage() {
      let url = "/user/list";
      let info = getItem("info") ? getItem("info") : {};
      let p = {
        communityId: info.communityId,
        start: (this.table.currentPage - 1) * this.table.pageSize,
        num: this.table.pageSize
      };

      if (this.name) p.name = this.name;
      p.usable = this.usable;
      if (this.userType) p.userType = this.userType;
      console.log(`p`,p);
      this.$http
        .fetch(url, p)
        .then(res => {
          console.log(res);
          this.table.rowCount = res.data.total;
          this.table.tableData = [];
          // this.table.tableData = res.data.rows
          for (let i = 0; i < res.data.rows.length; i++) {
            let row = res.data.rows[i];

            this.table.tableData.push({
              communityId: info.communityId,
              userId: row.userId ? row.userId : "", //			int			用户id
              nickName: row.nickName + "", //  		string		昵称
              userType: row.userType ? row.userType : "", // 		int			用户类型(1:游客,2:住户,3:业主)
              usable: row.usable ? row.usable : "", //    		int			是否可用(0:否,1:是)
              buildNum: row.buildNum ? row.buildNum : "", //  		string		楼栋(楼栋,单元,房号3个拼成一个字段)
              unitNum: row.unitNum ? row.unitNum : "", //   		string		单元(楼栋,单元,房号3个拼成一个字段)
              houseNum: row.houseNum ? row.houseNum : "", //  		string		房号(楼栋,单元,房号3个拼成一个字段)
              phoneNum: row.phoneNum ? row.phoneNum : "", //  		string		手机号
              realName: row.realName ? row.realName : "", //  		string		姓名
              gender: row.gender ? row.gender : "", //			int			性别(1:男,2:女)
              idCard: row.idCard ? row.idCard : "", //   		string		身份证号码
              idCardFront: row.idCardFront ? row.idCardFront : "", //		string		身份证正面
              idCardBack: row.idCardBack ? row.idCardBack : "", //		string		身份证背面
              createTime: row.createTime ? row.createTime : "", //		string		初次登录时间
              loginTime: row.loginTime ? row.loginTime : "" // 		string		上次登录时间
            });
          }
          console.log(this.table.tableData);
        })
        .catch(err => {});
    },
    currentChangeHandle(pageNum) {
      this.table.currentPage = pageNum;
      this.getMessage();
    }
  }
};
</script>
